<template>
    <q-page padding>
      <div class="text-h5 q-mb-md">首页</div>
      
      <!-- 状态监控 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle2">页面状态监控</div>
          <div class="q-mt-sm">
            <div class="text-body2">数据加载时间: <span class="text-primary">{{ loadTime }}</span></div>
            <div class="text-body2">onMounted次数: <span class="text-positive">{{ mountCount }}</span></div>
            <div class="text-body2">onActivated次数: <span class="text-info">{{ activatedCount }}</span></div>
            <div class="text-body2">当前计数器: <span class="text-orange">{{ counter }}</span></div>
          </div>
          <q-btn 
            size="sm" 
            color="secondary" 
            label="计数器+1" 
            @click="counter++" 
            class="q-mt-sm"
          />
        </q-card-section>
      </q-card>
  
      <!-- 测试输入框 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle2 q-mb-sm">状态保持测试</div>
          <q-input 
            v-model="testInput" 
            outlined 
            label="输入内容测试状态保持"
            hint="这个输入框的内容应该在页面切换后保持"
          />
        </q-card-section>
      </q-card>
  
      <!-- 商品列表 -->
      <div class="text-subtitle2 q-mb-sm">商品列表</div>
      <div class="row q-gutter-md">
        <q-card 
          v-for="product in productList" 
          :key="product.id"
          class="col-5 cursor-pointer hover-card"
          @click="goToProductDetail(product.id)"
        >
          <q-card-section>
            <div class="text-h6">{{ product.name }}</div>
            <div class="text-primary">￥{{ product.price }}</div>
          </q-card-section>
        </q-card>
      </div>
  
      <!-- 导航按钮 -->
      <div class="q-mt-lg q-gutter-sm">
        <q-btn color="primary" @click="goToOrders">我的订单</q-btn>
        <q-btn color="secondary" @click="goToSettings">设置</q-btn>
      </div>
    </q-page>
  </template>
  
  <script setup>
  import { ref, onMounted, onActivated, onDeactivated } from 'vue'
  import { useRouter } from 'vue-router'
  
  // 定义组件名 - 这个很重要，用于keep-alive
  defineOptions({
    name: 'HomePage'
  })
  
  const router = useRouter()
  
  // 响应式数据
  const loadTime = ref('')
  const mountCount = ref(0)
  const activatedCount = ref(0)
  const counter = ref(0)
  const testInput = ref('')
  
  const productList = ref([
    { id: 1, name: '商品A', price: 99 },
    { id: 2, name: '商品B', price: 199 },
    { id: 3, name: '商品C', price: 299 },
    { id: 4, name: '商品D', price: 399 }
  ])
  
  // 模拟异步数据加载
  const loadData = async () => {
    console.log('开始加载首页数据...')
    // 模拟网络请求
    await new Promise(resolve => setTimeout(resolve, 300))
    
    loadTime.value = new Date().toLocaleTimeString()
    console.log('✅ 首页数据加载完成:', loadTime.value)
  }
  
  // 跳转到商品详情
  const goToProductDetail = (productId) => {
    console.log('跳转到商品详情:', productId)
    router.push(`/product/${productId}`)
  }
  
  // 跳转到订单页面
  const goToOrders = () => {
    router.push('/order-list')
  }
  
  // 跳转到设置
  const goToSettings = () => {
    router.push('/settings')
  }
  
  // 生命周期钩子
  onMounted(() => {
    mountCount.value++
    console.log('🔵 HomePage onMounted - 第', mountCount.value, '次')
    
    // 只在首次挂载时加载数据
    loadData()
  })
  
  onActivated(() => {
    activatedCount.value++
    console.log('🟢 HomePage onActivated - 第', activatedCount.value, '次')
    console.log('当前状态 - counter:', counter.value, 'input:', testInput.value)
    
    // 注意：这里不调用loadData()，保持页面状态
  })
  
  onDeactivated(() => {
    console.log('🟡 HomePage onDeactivated - 页面失活')
  })
  </script>
  
  <style scoped>
  .hover-card {
    transition: transform 0.2s ease;
  }
  
  .hover-card:hover {
    transform: translateY(-2px);
  }
  </style>